<template>
	
	<view class="continers">

		<view class="mobile-frame" :style="{backgroundColor: (!edit ? 'rgba(0, 0, 0, 0)' : '#0e0e11'), borderWidth: (!edit ? '0' : '1px')}">
			
			<image v-if="edit && moni" src="../../static/moni_1.jpg" mode="" class="bg"></image>
		
			<block v-for="(c, index) in scene.allComponents" :key="c.temp_id">
				<blood-bar 
				v-if="c.table_name == 'blood_bar' && c.style == 'blood_bar' && (edit || (!edit && c.show == 1))" 
				:pos_x="c.x" 
				:pos_y="c.y" 
				:start_scale="c.scale" 
				:over_time="c.current_countdown"
				:drag_able="edit"
				:style="{opacity : c.opacity, zIndex : 5}"
				:cpt_id="c.id"
				:use_user_icon="c.use_user_icon == 1"
				@locationChanged="(loc) => locationChanged(index, loc)"
				@scaleChanged="(scale) => scaleChanged(index, scale)"
				/>
				
				<blood-sin
				v-if="c.table_name == 'blood_bar' && c.style == 'blood_sin' && (edit || (!edit && c.show == 1))" 
				:pos_x="c.x" 
				:pos_y="c.y" 
				:start_scale="c.scale" 
				:over_time="c.current_countdown"
				:drag_able="edit"
				:style="{opacity : c.opacity, zIndex : 5}"
				:cpt_id="c.id"
				:rounds="c.rounds"
				:use_user_icon="c.use_user_icon == 1"
				@locationChanged="(loc) => locationChanged(index, loc)"
				@scaleChanged="(scale) => scaleChanged(index, scale)"
				/>
				
				<gifts
				v-if="c.table_name == 'gifts' && c.style == 'gifts' && (edit || (!edit && c.show == 1))" 
				:pos_x="c.x" 
				:pos_y="c.y" 
				:start_scale="c.scale" 
				:over_time="c.current_countdown"
				:drag_able="edit"
				:style="{opacity : c.opacity, zIndex : 5}"
				:cpt_id="c.id"
				:space="c.space"
				:use_user_icon="c.use_user_icon == 1"
				@locationChanged="(loc) => locationChanged(index, loc)"
				@scaleChanged="(scale) => scaleChanged(index, scale)"
				/>
				
				<gifts-vertical
				v-if="c.table_name == 'gifts' && c.style == 'gifts_vertical' && (edit || (!edit && c.show == 1))" 
				:pos_x="c.x" 
				:pos_y="c.y" 
				:start_scale="c.scale" 
				:over_time="c.current_countdown"
				:drag_able="edit"
				:style="{opacity : c.opacity, zIndex : 5}"
				:cpt_id="c.id"
				:space="c.space"
				:use_user_icon="c.use_user_icon == 1"
				@locationChanged="(loc) => locationChanged(index, loc)"
				@scaleChanged="(scale) => scaleChanged(index, scale)"
				/>
				
				<rank
				v-if="c.table_name == 'rank' && c.style == 'rank' && (edit || (!edit && c.show == 1))" 
				:pos_x="c.x" 
				:pos_y="c.y" 
				:start_scale="c.scale" 
				:over_time="c.current_countdown"
				:drag_able="edit"
				:style="{opacity : c.opacity, zIndex : 5}"
				:cpt_id="c.id"
				:space="c.space"
				:use_user_icon="c.use_user_icon == 1"
				@locationChanged="(loc) => locationChanged(index, loc)"
				@scaleChanged="(scale) => scaleChanged(index, scale)"
				/>
			</block>
			
			<image v-if="edit && moni" src="../../static/moni_2.png" mode="" class="shadow-top"></image>
			
		</view>
		
		<!-- <view class="navi">
			<view class="bottoms" v-if="edit">
				<select-box style="margin-left: 4px; -webkit-app-region: no-drag;" :selected="moni" @click="moniClick">模拟画面（仅供大概参考）</select-box>
				<view class="hidden-self" @click="hiddenSelf">
					<uni-icons type="eye-filled" color="#73738f" size="25"></uni-icons>
				</view>
			</view>
		</view> -->
		
	</view>
	
</template>

<script>
	
	
	import gifts from '@/components/gifts/gifts.vue'
	import bloodBar from '@/components/blood-bar/blood-bar.vue'
	import rbBottomA from '@/components/rb-bottom-a/rb-bottom-a.vue'
	import rank from '@/components/rank/rank.vue'
	import selectBox from '@/components/select-box/select-box'
	import giftsVertical from '@/components/gifts-vertical/gifts-vertical.vue'

	export default {
		
		components: {
			gifts,
			bloodBar,
			rbBottomA,
			rank,
			selectBox,
			giftsVertical
		},
		
		data() {
			return {
				edit: false,
				scene: {
					allComponents: []
				},
				index: -1,
				moni: false
			}
		},
		
		onLoad() {
			
			// 获取当前场景编辑/投放状态
			window.electronAPI.mobileSceneIsEdit().then((edit) => {
				this.edit = edit
			})
			// 当前场景编辑/投放状态变化
			window.electronAPI.mobileSceneIsEditChanged((edit) => {
				this.edit = edit
			})
			// 获取当前场景数据
			window.electronAPI.currentMobileSceneData().then((sceneInfo) => {
				this.scene = sceneInfo.scene
				this.index = sceneInfo.index
			})
			// 当前显示场景变化（非数据变化，相当于展示一个新场景）
			window.electronAPI.onCurrentMobileSceneChanged((sceneInfo) => {
				this.scene = sceneInfo.scene
				this.index = sceneInfo.index
			})
			
			// window.electronAPI.onUpdateSceneCpt((scene) => {
			// 	this.scene = scene
			// })
			
			// 场景内容发生变化
			window.electronAPI.noticeSceneChanged((scene, index, cpt_index, from) => {
				if (from != 'mobile-frame' && this.index == index) {
					this.scene = scene
				}
			})
			
			// 获取模拟场景是否打开
			window.electronAPI.mobileFrameMoni().then((moni) => {
				this.moni = moni
			})
			// 模拟场景发生变化
			window.electronAPI.onMobileFrameMoniChanged((moni) => {
				this.moni = moni
			})
		},
		
		onUnload() {
			window.electronAPI.removeMobileSceneIsEditChanged()
			// window.electronAPI.removeOnComponentDataChangedToHtml()
			window.electronAPI.removeOnCurrentMobileSceneChanged()
			// window.electronAPI.removeOnUpdateSceneCpt()
			
			// 移除 场景内容发生变化监听
			window.electronAPI.removeNoticeSceneChanged()
			// 移除模拟场景监听
			window.electronAPI.removeOnMobileFrameMoniChanged()
		},
		
		methods: {

			locationChanged(index, location) {
				let cpt = this.scene.allComponents[index]
				window.electronAPI.goToselectCurrentScene()
				cpt.x = location.x
				cpt.y = location.y
				window.electronAPI.sceneChanged(this.scene, this.index, index, true, 'mobile-frame')
			},
			
			scaleChanged(index, scale) {
				let cpt = this.scene.allComponents[index]
				window.electronAPI.goToselectCurrentScene()
				cpt.scale = scale
				window.electronAPI.sceneChanged(this.scene, this.index, index, true, 'mobile-frame')
			},
			
			moniClick() {
				this.moni = !this.moni
			},
			
			hiddenSelf() {
				window.electronAPI.hiddenMobile()
			}
		}
	}
</script>

<style scoped>
	
	.continers {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
	}
	
	.navi {
		height: 1px;
		flex: 1;
		width: 100%;
		display: flex;
		-webkit-app-region: drag;
	}
	
	.bottoms {
		display: flex;
		align-items: center;
		margin-top: 5px;
		border-radius: 5px;
		background-color: #272730;
		width: 100%;
		border: #5a5a6d 1px solid;
		justify-content: space-between;
	}
	
	.hidden-self {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		width: 40px;
		-webkit-app-region: no-drag;
	}
	
	.hidden-self:hover {
		cursor: pointer;
		opacity: 0.8;
	}
	
	.hidden-self:active {
		opacity: 0.7;
	}
	
	.mobile-frame {
		width: 100%;
		height: calc(100vw * 2556 / 1179);
		/* height: calc(100vh - 2px); */
		background-color: #0e0e11;
		border-radius: 5px;
		-webkit-app-region: drag;  /* 使该区域可拖动窗口 */
		/* box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); */
		/* border: #5a5a6d 1px solid; */
		position: relative;
	}
	
	.bg {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
		border-radius: 5px;
	}
	
	.shadow-top {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 10;
		pointer-events: none;
		border-radius: 5px;
	}
	
	.scene {
		display: flex;
		flex-direction: column;
	}
	
	.navigation-bar {
		border: #5a5a6d 1px solid;
		border-radius: 5px;
		-webkit-app-region: drag;
		width: calc(100% - 2px);
		height: 38px;
		background-color: #0e0e11;
		margin-bottom: 10px;
		display: flex;
	}
	
	.left {
		height: 100%;
	}
	
	.btn {
		width: 38px;
		height: 38px;
	}
	
</style>
